<template>
    <div class="common-container">
        <div class="header">
            <div class="header_left">
                <el-input v-model.trim="search_val.imei" oninput="this.value=this.value.replace(/\D/g,'')"
                    placeholder="设备编码" size="small" clearable @clear="clearImei"
                    style="width: 220px;margin-right: 15px;" maxlength="50">
                    <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
                        @click="searchClick"></el-button>
                </el-input>

                <el-popover placement="bottom" width="460" trigger="click" popper-class="popover" size="small"
                    v-model="showPopover">
                    <div>
                        <el-form label-width="70px" style="margin: 20px 0" class="popover_from">
                            <el-form-item size="small" label="组织机构"
                                v-if="user.roleName === 'TENANT_ADMIN' || user.roleName === 'ORG_ADMIN'">
                                <TreeSearch style="width: 360px; margin-left: 15px" @changeOrgId="changeOrgId"
                                    ref="refTreeSearch">
                                </TreeSearch>
                            </el-form-item>

                            <el-form-item size="small" label="联网单位">
                                <el-select size="small" style="width: 360px;margin-left: 15px;" clearable
                                    v-loadMore="loadMore" v-model='selectedValue' placeholder='请选择联网单位' filterable
                                    remote :remote-method="remoteMethod" @clear="handleClear">
                                    <el-option v-for='item in orgList' :label='item.orgName' :value='item.id'
                                        :key='item.id'>
                                    </el-option>
                                    <div class="div_box" v-loading="loading" :style="loading ? '' : 'display: none;'">
                                    </div>
                                </el-select>
                            </el-form-item>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item size="small" label="隐患类型">
                                        <el-select v-model="search_val.type" placeholder="请选择隐患类型" size="small"
                                            clearable style="width: 360px; margin-left: 15px">
                                            <el-option v-for="dict in dict.type.device_hidden_type" :key="dict.id"
                                                :label="dict.raw.dickLabel" :value="dict.raw.dickValue" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item size="small" label="处理状态">
                                        <el-select v-model="search_val.status" placeholder="处理状态" size="small" clearable
                                            style="width: 130px; margin-left: 15px">
                                            <el-option v-for="(item, i) in statusList" :key="i" :label="item.name"
                                                :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item size="small" label="隐患源">
                                        <el-select v-model="search_val.source" placeholder="隐患源" size="small" clearable
                                            style="width: 130px; margin-left: 15px">
                                            <el-option v-for="(item, i) in sourceList" :key="i" :label="item.name"
                                                :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-form-item size="small" label="日期">
                                <el-date-picker v-model.trim="timeArr" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
                                    :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions" clearable
                                    style="width: 360px"></el-date-picker>
                            </el-form-item>
                        </el-form>
                        <div class="footer" style="text-align: right">
                            <el-button size="small" @click="resetClick1" class="cancel-button">重 置</el-button>
                            <el-button size="small" class="confirm-button" @click="searchClick1">
                                确 定
                            </el-button>
                        </div>
                    </div>
                    <el-button size="small" slot="reference"
                        :class="hasSearch ? 'elhasSearch elhasSearch2' : 'elhasSearch2'">
                        高级搜索
                        <i class="el-icon-search" style="margin-left: 5px; font-size: 12px"></i>
                    </el-button>
                </el-popover>
            </div>
        </div>
        <div class="content">
            <el-table :data="dataList" height="calc(100% - 65px)" class="table" ref="refTable" row-key="id"
                :header-cell-style="headerStyle" v-loading="loadingTable" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(47, 51, 73, 0.3)">
                <el-table-column align="center" label="序号" type="index" width="80" height="30"></el-table-column>

                <el-table-column align="center" prop="imei" label="设备编码" min-width="140"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="subDeviceCode" label="子设备编码" min-width="140"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column align="center" prop="type" label="隐患类型" min-width="150" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <dict-tag :options="dict.type.device_hidden_type" :value="row.type" />
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="隐患名称" min-width="140"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="orgName" label="联网单位" min-width="120"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="spaceName" label="安装点" min-width="120"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="deviceType" label="产品类型" min-width="120" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        {{ row.deviceType | deviceTypeText2 }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="deviceModel" label="产品型号" min-width="120"
                    show-overflow-tooltip></el-table-column>
                <!-- <el-table-column align="center" prop="username" label="上报人用户名" min-width="100"
                    show-overflow-tooltip></el-table-column> -->
                <el-table-column align="center" prop="source" label="隐患源" min-width="100" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <el-tag v-if="row.source == 0" type="danger">设备上报</el-tag>
                        <el-tag v-else-if="row.source == 1" type="warning">人工上报</el-tag>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="status" label="处理状态" min-width="100" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <el-tag v-if="row.status == 1" type="danger">未处理</el-tag>
                        <el-tag v-else-if="row.status == 2" type="danger">已忽略</el-tag>
                        <el-tag v-else-if="row.status == 3" type="warning">修复中</el-tag>
                        <el-tag v-else-if="row.status == 4" type="success">已修复</el-tag>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="content" label="隐患描述" min-width="90"
                    show-overflow-tooltip></el-table-column>

                <el-table-column align="center" prop="remark" label="备注" min-width="90"
                    show-overflow-tooltip></el-table-column>

                <!-- <el-table-column align="center" prop="mode" label="处理方式" min-width="100" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <el-tag v-if="row.mode == 0" type="success">现场处理</el-tag>
                        <el-tag v-else-if="row.mode == 1" type="warning">工单处理</el-tag>
                    </template>
                </el-table-column> -->

                <el-table-column align="center" prop="createTime" label="上报时间" min-width="160"
                    show-overflow-tooltip></el-table-column>

                <el-table-column align="center" label="操作" width="120" fixed="right">
                    <template slot-scope="{ row }">
                        <el-tooltip class="item" effect="dark" content="隐患详情" placement="bottom" v-if="row.status != 1"
                            v-permission="{ action: 'hidden:details' }">
                            <i @click="onHandle(row)" class="iconfont xiangqing tableBtnIcon"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="隐患处理" placement="bottom" v-else
                            v-permission="{ action: 'hidden:handle' }">
                            <i @click="onHandle(row)" class="iconfont tixianchuli tableBtnIcon"></i>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :page.sync="page" :limit.sync="limit" :total="total" @pagination="getDataList"
                class="pagination">
            </pagination>
        </div>
        <handlehidDanger ref="refhandlehidDanger" :editInfo="editInfo"></handlehidDanger>
    </div>
</template>

<script>
import { reqHiddenDangerPage } from "@api/api.js";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import advanceSearchMixin from "./mixins/advanceSearch.js"; //高级搜索
import handlehidDanger from "./components/handlehidDanger";
import loadMore from "@mixin/loadMore";
import axios from "axios";
import $ from "jquery";
import { jsonp } from "vue-jsonp"; //使用jsonp
import TreeSearch from "@components/TreeSearch.vue";

export default {
    dicts: ['device_hidden_type'],
    name: "hidden",
    components: {
        Pagination,
        handlehidDanger,
        TreeSearch,
    },
    mixins: [tableStyleMixin, loadMore, advanceSearchMixin],
    data() {
        return {
            page: 1,
            limit: 10,
            total: 0,
            dataList: [],
            loadingSearch: false,
            timeArr: [],
            showPopover: false,
            editInfo: {},
            href: "",
            targetId: "",
            organParams: {},
            loadingTable: false,
        };
    },
    computed: {
        ...mapState(["user", "datav", "spacesManage"]),
    },
    mounted() {
        // if (
        //     this.user.roleName == "ORG_ADMIN" ||
        //     this.user.roleName == "INSTERALL_USER"
        // ) {
        //     // 组织||装维
        //     this.targetId = this.spacesManage.organizationInfo.orgId;
        //     this.getDataList();
        // } else {
        //     this.getDataList();
        // }
        this.getDataList();
        if (this.user.roleName == 'INSTERALL_USER' || this.user.roleName == 'UNIT_ADMIN') {
            this.getOrgList()
        }
    },
    methods: {
        onHandle(e) {
            // console.log(e);
            this.editInfo = JSON.parse(JSON.stringify(e));
            this.$refs.refhandlehidDanger.dialogVisible = true;
        },
        async getDataList() {
            if (this.timeArr == null) {
                this.timeArr = "";
            }
            let params = {
                userId: this.user.userId,
                roleName: this.user.roleName,
                // tenantId: this.user.tenantId,
                orgId: this.selectedValue == '' ? this.parentId : this.selectedValue,//机构||单位
                source: this.search_val.source,
                status: this.search_val.status,
                imei: this.search_val.imei,
                type: this.search_val.type,
                startTime: this.timeArr[0],
                endTime: this.timeArr[1],
            };
            this.loadingTable = true;
            const res = await reqHiddenDangerPage(this.page, this.limit, params);
            this.loadingTable = false;
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.hasSearch = (this.parentId || this.selectedValue || this.search_val.source || this.search_val.status || this.search_val.type || this.timeArr[0] || this.timeArr[1]) ? true : false
            this.dataList = res.data.rows;
            this.total = res.data.total;
        },
        // 搜索
        async searchClick() {
            this.page = 1;
            this.limit = 10;
            this.loadingSearch = true;
            await this.getDataList();
            this.loadingSearch = false;
        },
        // 清空
        clearImei() {
            this.page = 1;
            this.limit = 10;
            this.getDataList();
        },
    },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");
@import url("~@views/style/tree.less"); //左侧组织机构样式

.header_left {
    display: flex;
}

.input_box {
    margin-right: 15px;
}

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
    background: @primaryHeaderBgcolor !important;
    color: @primaryContentTxt;
}

// 日期控件
.el-range-editor.el-input__inner {
    margin-left: 15px;
    height: 32px;
}

// 查看关联安装点
.search_space {
    padding: 0 10px;
    cursor: pointer;

    &:hover {
        color: #7367f0;
    }
}

// 下拉框加载开始
.div_box {
    height: 276px;
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    z-index: 9999;
    // background: red;
    // opacity: 0.5;
}

::v-deep .el-loading-mask {
    border-radius: 4px;
}

// 下拉框加载结束

// 查询条件切换
::v-deep .sel_prepend .el-input {
    width: 100px;
}

// 搜索框
::v-deep .el_input .el-input__inner {
    border-left: none !important;
    border-radius: 0px !important;
}

::v-deep .el_Select .el-input__inner {
    border-radius: 0px !important;
}

// 高级搜索
::v-deep .el-button--primary {
    background-color: #7367f0;
    border: 1px solid #7367f0;
    color: #fff;
}

::v-deep .el-form-item__label {
    color: @primaryThemeTxtColor2;
    padding: 0px;
}

::v-deep .el-input__inner {
    color: var(--primaryContentTxt, #f1f1f1) !important;
}

.dropdown {
    background: #7367f0;
    color: #fff;
    border: none;
}

::v-deep .el-button--small {
    border: none;
}
</style>
